<template>

  <div id="main">
  </div>
</template>

<script>
	import echarts from 'echarts'
    export default {
      name: "Sunburst",
      mounted() {
        this.Draw1();
      },
      methods: {
        Draw1() {
		  const myChart = echarts.init(document.getElementById('main'));
		  //document.getElementById('main')可以更换为this.$el
          const data = [{
              name: 'Grandpa',
              children: [{
                  name: 'Uncle Leo',
                  value: 15,
                  children: [{
                      name: 'Cousin Jack',
                      value: 2
                  }, {
                      name: 'Cousin Mary',
                      value: 5,
                      children: [{
                          name: 'Jackson',
                          value: 2
                      }]
                  }, {
                      name: 'Cousin Ben',
                      value: 4
                  }]
              }, {
                  name: 'Father',
                  value: 10,
                  children: [{
                      name: 'Me',
                      value: 5
                  }, {
                      name: 'Brother Peter',
                      value: 1
                  }]
              }]
          }, {
              name: 'Nancy',
              children: [{
                  name: 'Uncle Nike',
                  children: [{
                      name: 'Cousin Betty',
                      value: 1
                  }, {
                      name: 'Cousin Jenny',
                      value: 2
                  }]
              }]
          }];
          myChart.setOption({
              series: {
                  type: 'sunburst',
                  // emphasis: {
                  //     focus: 'ancestor'
                  // },
                  data: data,
                  radius: [0, '90%'],
                  label: {
                      rotate: 'radial'
                  }
              }
          })

        }
      }
    }
</script>

<style>
  #main {
    width: 1000px;
    height: 400px;
  }
</style>
